<template>
  <div class="customize">
    <div class="title">
      说明：<br>
      可以对指定Logo进行自定义设置<br>
      设置成功后请重新登陆或刷新页面生效<br>
    </div>
    <el-form label-width="120px">
      <el-form-item label="Logo:">
        <div>
          <img :src="showNavLogo" alt="">
          <span class="userEdit" id="uploadUserIcon1">上传</span>
          <span class="userEdit" v-if="isShowNavL" @click="turnNav">默认</span>
        </div>
        <span class="explain">支持png,jpg类型，建议尺寸为32x32，图片文件不超过1M</span>
      </el-form-item>
      <el-form-item label="浏览器标签页Logo:">
        <div>
          <img :src="showTabLogo" alt="">
          <span class="userEdit" id="uploadUserIcon2">上传</span>
          <span class="userEdit" v-if="isShowTabL" @click="turnTab">默认</span>
        </div>
        <span class="explain">支持ico类型，建议尺寸为32x32</span>
      </el-form-item>
      <el-button type="primary" class="primary_btn" @click="save">保存</el-button>
    </el-form>
  </div>
</template>

<script>
import {uploadTo7moorDomain} from '@/utils/qiniuUtils'
import * as m7Utils from '@/utils/m7Utils'
export default {
  data () {
    return {
      m7uploaders: [],
      openIndex: 0,
      navLogoBool: false,
      icoLogoBool: false,
      showTabLogo: '/img/logo.ico',
      showNavLogo: '/img/logo@4X.png',
      TabLogo: '/img/logo.ico',
      navLogo: '/img/logo@4X.png',
      id: ''
    }
  },
  methods: {
    turnNav () {
      // 判读是否为oem是为空不是为默认logo
      this.showNavLogo = this.$store.state.oemObj.oemFlag ? '' : this.navLogo
    },
    turnTab () {
      // 判读是否为oem是为空不是为默认logo
      this.showTabLogo = this.$store.state.oemObj.oemFlag ? '' : this.TabLogo
    },
    upDateIcon () {
      var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = '/img/logo.ico';
      document.getElementsByTagName('head')[0].appendChild(link);
    },
    initUploadUserIcon (ev) {
      let account = this.$store.state.session.user.account
      let that = this
      let filters = {
        mime_types: [
          { title: 'Image files', extensions: 'ico' }
        ]
      }
      let filters1 = {
        mime_types: [
          { title: 'Image files', extensions: 'png,jpg' }
        ]
      }
      let fileAdded = function (up, files) {
        console.log('fileAdd')
      }
      let beforeUpload = function (up, file) {
        console.log('beforeUpload')
      }
      let uploadProgress = function (up, file) {
        console.log('uploadProgress')
      }
      let uploadComplete = function () {
        console.log('uploadComplete')
      }
      let fileUploaded = function (up, file, info) {
        let domain = that.$store.state.isUseQiniu ? up.getOption('domain'):
          that.$store.state.fileDomain.cos7moorTestDomain 
        let res = JSON.parse(info||'{}')
        let sourceLink = domain + (that.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
        that.showNavLogo = sourceLink
        that.navLogoBool = true
      }
      let fileUploaded1 = function (up, file, info) {
        let domain = that.$store.state.isUseQiniu ? up.getOption('domain'):
          that.$store.state.fileDomain.cos7moorTestDomain 
        let res = JSON.parse(info||'{}')
        let sourceLink = domain + (that.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
        that.showTabLogo = sourceLink
        that.icoLogoBool = true
      }
      let error = function (up, err, errTip) {
        console.log('uploadError ' + errTip)
        that.$message.error(errTip)
      }
      let key = function (up, file) {
        let date = m7Utils.getCurrentDate()
        let today = new Date()
        let time = today.getTime()
        let fileName = file.name
        let fileSuffix = ''
        if (fileName) {
          fileSuffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
        }
        let key = time + fileSuffix
        return key
      }
      if (this.openIndex <= 1) { // 初始化加载一次，点击按钮出现弹窗加载一次
        this.m7uploaders.push(
          uploadTo7moorDomain(this.$store.state.fileDomain.cos7moorCustomerDomain, this.$store.state.session.user._id, 'uploadUserIcon1', filters1, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key, '1mb', false, false)
        )
        this.m7uploaders.push(
          uploadTo7moorDomain(this.$store.state.fileDomain.cos7moorCustomerDomain, this.$store.state.session.user._id, 'uploadUserIcon2', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded1, error, key, '1mb', false, false)
        )
        this.openIndex = this.openIndex + 1
      }
    },
    fetchData () {
      this.$store.dispatch('queryCustomLogo', {idle: ''}).then(res => {
        if (res && res.success) {
          if (res.data) {
            if (res.data.navigationLogo) {
              this.showNavLogo = res.data.navigationLogo
              this.navLogoBool = true
            } else if (this.$store.state.oemObj.oemFlag) { // 判断oem是不展示
              this.showNavLogo = ''
            }
            if (res.data.tabLogo) {
              this.showTabLogo = res.data.tabLogo
              this.icoLogoBool = true
            } else if (this.$store.state.oemObj.oemFlag) { // 判断oem是不展示
              this.showTabLogo = ''
            }
            this.id = res.data._id
          } else {
            if (this.$store.state.oemObj.oemFlag) {
              this.showTabLogo = ''
              this.showNavLogo = ''
            }
          }
        }
      })
    },
    save () {
      let data = {
        _id: this.id,
        navigationLogo: '',
        tabLogo: ''
      }
      data.navigationLogo = this.showNavLogo.indexOf('//') > -1 ? this.showNavLogo : ''
      data.tabLogo = this.showTabLogo.indexOf('//') > -1 ? this.showTabLogo : ''
      this.$store.dispatch('saveCustomLogo', data).then(res => {
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      })
    }
  },
  computed: {
    isShowNavL () {
      // return this.navLogoBool || this.$store.state.session.customLogo.navigationLogoOpen
      return this.navLogoBool
    },
    isShowTabL () {
      // return this.icoLogoBool || this.$store.state.session.customLogo.tabLogo
      return this.icoLogoBool
    }
  },
  mounted () {
    this.initUploadUserIcon()
  },
  beforeMount () {
    // this.upDateIcon()
    this.fetchData()
  },
  beforeDestroy () {
    this.m7uploaders.forEach(uploader => {
      uploader &&
      uploader.destroy &&
      uploader.destroy()
    })
  }

}
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .customize
    padding 20px
    overflow-y auto
    height calc(100vh - 180px)
    .title
      color $c-prompt
      line-height 28px
      margin-bottom 20px
    .el-form
      .explain
        font-size 12px
        color #7F7F7F
      img
        width 32px
        height 32px
      .userEdit
        margin-left 12px
        color $c-prompt
        cursor pointer
        font-size 12px
        border-bottom 1px solid $c-prompt
</style>